<template>
  <div class="maintenanceOfChargingItems h100">
    <div class="PageContent">
        <el-col :span="4" class="left-tree">
          <el-row style="text-align: center;line-height: 5em;">
            <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="btnRight.btnStorageTreeAdd" plain @click="addType()"></el-button>
            <el-button type="primary" icon="el-icon-edit"  v-if="btnRight.btnStorageTreeEdit"  @click="modifyType()"></el-button>
            <el-button type="danger" icon="el-icon-delete"  v-if="btnRight.btnStorageTreeDelete" @click="removeType()"></el-button>
          </el-row>
          <el-tree :data="treeData" ref="tree"
                   :props="defaultProps"
                   node-key="id"
                   default-expand-all
                   check-strictly
                   :default-checked-keys="selectedNode"
                   highlight-current
                   @check="(click, checked)=>{handleClick(click, checked)}"
                   @node-click="handleClick"
          ></el-tree>
        </el-col>
        <el-col :span="20"  class="right-tree">
          <el-row style="text-align: left;line-height: 5em;" class="searchData">
            <el-button type="primary" v-if="btnRight.btnNodeAdd" plain @click="add()">添加</el-button>
            <el-button type="primary" v-if="btnRight.btnNodeEdit"  @click="modify()">修改</el-button>
            <el-button type="danger"  v-if="btnRight.btnNodeDelete" @click="remove()">删除</el-button>
          </el-row>
          <el-table
            ref="singleTable"
            :data="tableData" :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
            border
            stripe
            @row-click="handleRowClick"
            @select="select" @select-all="selectAll"
            style="width: 100%;height: calc(100% - 125px);overflow-y: scroll">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              property="id"
              label="编号"
              align = 'center'
              width="250">
            </el-table-column>
            <el-table-column
              property="depositCaseCode"
              label="格位类型"
              align = 'center'
              width="150">
            </el-table-column>
            <el-table-column
              property="depositCaseType"
              label="收费类型"
              align = 'center'
              width="100">
            </el-table-column>
           <!-- <el-table-column
              property="depositCasePrice"
              align = 'center'
              label="收费用标准"
              width="100">
            </el-table-column>-->
            <el-table-column
              property="depositCasePrice"
              align = 'center'
              label="价格"
              width="100">
            </el-table-column>
            <el-table-column
              property="depositCaseState"
              align = 'center'
              label="状态"
              width="100">
            </el-table-column>
            <el-table-column
              property="depositCaseCols"
              align = 'center'
              label="列号"
              width="150">
            </el-table-column>
            <el-table-column
              property="depositCaseRows"
              align = 'center'
              label="层号"
              width="150">
            </el-table-column>
            <el-table-column
              property="depositCaseOrder"
              align = 'center'
              label="排序">
            </el-table-column>
           <!-- <el-table-column
              property="itemDescribe"
              align = 'center'
              label="备注">
            </el-table-column>-->
          </el-table>
          <p style="text-align: right;margin-top: 20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pager.currentPage"
              :page-size="pager.pageSize"
              background
              layout="prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </p>
        </el-col>
    </div>
    <el-dialog title="寄存楼室架编辑" :visible.sync="dialogVisibleType" width="700px" v-dialogDrag   border >
      <el-form :model="saveTypeData" :rules="rulesType" ref="treeNodeForm" :inline="true" label-width="120px" :disabled="saveFlagType">
        <el-row :gutter="5">
          <el-form-item label="节点类型:" >
            <el-select
              v-model="saveTypeData.typeCode"  style="width: 495px;"
              clearable
              @change="typeChange(saveTypeData.typeCode)"
              filterable
              placeholder="节点类型"
              class="w150"
            >
              <el-option
                v-for="item in copydictionary.storage_node_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>

        </el-row>

        <el-row :gutter="5">
          <el-form-item label="父节点:"  prop="floorType"  v-if="!floorVisible">根节点</el-form-item>
          <el-form-item label="父节点:"  prop="floorType"  v-if="floorVisible">
            <el-select
              v-model="saveTypeData.floorType"  style="width: 200px;"
              clearable
              @change="loadRoom(saveTypeData.floorType)"
              filterable
              placeholder="节点类型"
              class="w150"
            >
              <el-option
                v-for="item in floor"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>
          <el-form-item   prop="type"  v-if="roomVisible">
            <el-select
              v-model="saveTypeData.roomType"  style="width: 200px;"
              clearable
              filterable
              placeholder="节点类型"
              class="w150"
            >
              <el-option
                v-for="item in room"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="节点名称:"  >
            <el-input type="textarea" v-model="saveTypeData.name" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:"  >
            <el-input  type="textarea" v-model="saveTypeData.orderId" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" v-if="btnRight.btnStorageTreeSave" @click="saveType()"  :disabled="saveFlagType">保 存</el-button>
        <el-button type="primary" v-if="btnRight.btnStorageTreeClose" plain @click="dialogVisibleType = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="寄存架生成格位信息" :visible.sync="dialogVisible" width="1100px" v-dialogDrag   border >
      <el-form :model="addNodeFormData" :rules="AddStorageRules" ref="addNodeForm" class="saveform"  :inline="true" label-width="120px" :disabled="saveFlag">
        <el-row :gutter="5" style="width:495px;">
          <el-form-item><label>寄存楼-寄存室-寄存架</label></el-form-item>
        </el-row>
        <el-row  :gutter="5">
          <el-form-item label="新增列数:" >
            <el-input v-model="addNodeFormData.columnNumber"  type="number"></el-input>
          </el-form-item>
          <el-form-item label="列起始数:" >
            <el-input v-model="addNodeFormData.columnBeginNumber" type="number"  ></el-input>
          </el-form-item>
          <el-form-item label="排除数字:" >
            <el-input v-model="addNodeFormData.columnDelNumber" type="number"  ></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="新增层数:" >
            <el-input v-model="addNodeFormData.rowNumber"   type="number"></el-input>
          </el-form-item>
          <el-form-item label="层起始数:" >
            <el-input v-model="addNodeFormData.rowBeginNumber"   type="number"></el-input>
          </el-form-item>
          <el-form-item label="排除数字:" >
            <el-input v-model="addNodeFormData.rowDelNumber" type="number"  ></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="层排序方式:" prop="itemPrice" >
            <el-radio v-model="addNodeFormData.rowOrderType" label="0" >自上倒下（正序）</el-radio>
            <el-radio v-model="addNodeFormData.rowOrderType" label="1">自下倒上（倒序）</el-radio>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
            <el-form-item label="编码规则:"  prop="itemNumber">
              <el-select v-model="addNodeFormData.creatNoType" placeholder="请选择" >
                <el-option
                  v-for="item in codeRule"
                  :label="item.label"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="格位类型:"  prop="itemNumber">
            <el-select v-model="addNodeFormData.depositCaseCode" placeholder="请选择" >
              <el-option
                v-for="item in copydictionary.cells_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState"
                />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="收费类型:"  prop="chargeType">

            <el-select v-model="addNodeFormData.chargeType" placeholder="请选择"
                       @change="selectChargeTypeToPrice(addNodeFormData.chargeType)"
            >
              <el-option
                v-for="item in chargeList"
                :label="item.itemName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="价格:" prop="price" >
            <el-input  onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="addNodeFormData.price" maxlength="11" readonly="true"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:" >
            <el-input type="number"  onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="addNodeFormData.orderId" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input  type="textarea" v-model="addNodeFormData.remark" style="width: 535px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary"  v-if="btnRight.btnNodeSave"  @click="saveAddNode()" :disabled="saveFlag">保 存</el-button>
        <el-button type="primary" v-if="btnRight.btnNodeClose"   @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="寄存格位信息维护" :visible.sync="dialogEditVisible" width="700px" v-dialogDrag   border >
      <el-form :model="editNodeFormData" :rules="rulesNode" ref="editNodeForm" class="saveform"  :inline="true" label-width="120px" :disabled="saveFlag">
        <el-row :gutter="5" style="width:495px;">
          <el-form-item><label>寄存楼-寄存室-寄存架</label></el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="编码:" >
            <el-input    v-model="editNodeFormData.id" maxlength="11" disabled ></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="格位类型:"  prop="depositCaseCode">
            <el-select v-model="editNodeFormData.depositCaseCode" placeholder="请选择" >
              <el-option
                v-for="item in copydictionary.cells_type"
                :key="item.dataCode"
                :label="item.dataText"
                :value="item.dataCode"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="收费类型:"  prop="depositCaseServiceid">
            <el-select v-model="editNodeFormData.depositCaseServiceid" placeholder="请选择"
            @change="selectChargeTypeToPrice(this.editNodeFormData.depositCaseServiceid)"
            >
              <el-option
                v-for="item in chargeList"
                :label="item.itemName"
                :value="item.id"/>
            </el-select>
          </el-form-item>
        </el-row>

        <el-row :gutter="5">
          <el-form-item label="价格:" prop="depositCasePrice" >
            <el-input   type="number"  onkeyup="value = value.match(/^\d+(?:.\d{0,2})?/)" readonly="readonly" v-model="editNodeFormData.depositCasePrice" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="排序:" >
            <el-input   type="number" v-model="editNodeFormData.depositCaseOrder" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input  type="textarea" v-model="editNodeFormData.remark" style="width: 535px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary"  v-if="btnRight.btnNodeSave"  @click="saveNode()" :disabled="saveFlag">保 存</el-button>
        <el-button type="primary" v-if="btnRight.btnNodeClose"   @click="dialogEditVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import * as API from '@/api/systemApplication'
  import {toFixed} from "../../utils/tofixed";
  export default {
    name: "storageNodeList",
    data(){
      return{
        rules: {
          itemCode: [{required: true, message: '请输入项目编码', trigger: 'blur'}],
          itemName: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
          itemPrice: [{required: true, message: '请输入项目价格', trigger: 'blur'}],
          itemNumber: [{required: true, message: '请输入项目数量', trigger: 'blur'}],
        },
        rulesType:{
          type: [{required: true, message: '请输入分类编码', trigger: 'blur'}],
          typeName: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
        },
        rulesNode:{
          depositCasePrice: [{required: true, message: '请输入价格', trigger: 'blur'}],
        },
        AddStorageRules: {
          price: [{required: true, message: '请输入价格', trigger: 'blur'}],
        },
        treeData: [{
          id:0,
          label: '寄存管理',
          children: []
        }],
        treeInfoLoad:[],//加载的树形数据
        search:"",
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        chargeList:[],//收费类型
        tableData: [],
        floor:[],//寄存楼
        room:[],//寄存室
        currentRow: null,
        tableSelection:[],
        selectOrg: {
          orgsid: []
        },
        onpresscTime:0,  //  阻止短时间内连续点击
        saveFlagType:false, //保存标志
        saveFlag:false, //保存标志
        dialogVisibleType:false,  //项目类型分类维护对话框
        dialogVisible:false,//项目分类维护对话框
        dialogEditVisible:false,//项目分类维护对话框
        floorVisible:false,//楼节点是否显示
        roomVisible:false,//室节点是否显示
        saveTypeData:{       //保存服务物品类型基本信息
          "id": 0,
          "pId": "",
          "parentId": "",
          "floorType": "",//楼类型
          "roomType": "",//室类型
          "type": "",//类型
          "typeCode": 0,
          "name": "",
          "typeDescribe": "",
          "orderId": "",
          "version": 0
        },
        selectedNode:[],//选中节点默认数组
        selectedData:{},//选中节点
        dictionary:{},//字典值
        copydictionary:[],//字典值
        //格位生成表单
        addNodeFormData:{  //保存寄存新增表单数据
          "depositCaseTreeid":0,//寄存架id
         "columnNumber":"",//列增加数
         "columnBeginNumber":"",//列起始数
         "columnDelNumber":"",//列排除数
         "rowNumber":"",//层数
         "rowBeginNumber":"",//层起始数
         "rowDelNumber":"",//层排除数
          "rowOrderType":"",//排序类型
          "chargeType":0,//收费类型
          "depositCaseCode":0,//格位类型
          "orderId":0,//排序
          "price":0,//价格
          "remark":0,//备注
          "creatNoType":0,//编码生成规则

        }, //格位编辑表单
        editNodeFormData:{
          "id":0,//id
          "caseTreeId":"",//树节点
          "depositCaseNo":"",//格位编码
          "depositCaseCode":"",//格位类型编码
          "depositCaseType":"",//格位类型类型
          "depositCaseState":"",//格位状态
          "depositCasePrice":"",//价格
          "depositCaseOrder":0,//排序
          "depositCaseCols":"",//列号
          "depositCaseRows":"",//行号
          "depositCaseServiceid":"",//物品id
          "positionName":"",//节点全名称
          "version":0,//版本
        },
        disableState:[
          { label:'有效',value:0 },
          { label:'无效',value:1 }
          ],
        //编码规则
        codeRule:[
          { label:'无',value:0}
        ],
        pager:{
          "pageSize": 20,
          "total": 1,
          "currentPage": 1
        },
        dialogVisibleList:false,
          //按钮权限
        btnRight: {
          btnStorageTreeAdd:true,//  目录新增
          btnStorageTreeEdit:true,// 目录编辑
          btnStorageTreeDelete:true,// 目录删除
          btnNodeAdd :true,//格位新增
          btnNodeEdit :true,//格位编辑
          btnNodeDelete:true,//格位删除
          btnStorageTreeSave:true,//保存
          btnStorageTreeClose:true,//关闭
          btnNodeSave:true,//保存
          btnNodeClose:true,//关闭
        }
      }
    },
    mounted(){
      this.loadTreeData();
      //加载楼信息
      this.loadFloor();
      //加载字典寄存目录类型
      this.loadDictionaryData();
      //加载费用列表
      this.loadChargeByTypeCode();
      //载入按钮
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key]= this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
    },
    computed: {
      // 模糊搜索
      tables () {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          return this.listNoPackage.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            {
              return Object.keys(data).some(key => {
                if (key=="itemName" ||key =="itemPrice"){
                  return String(data[key]).indexOf(search) > -1
                }
              })
            }

          })
        }
        return this.listNoPackage
      }
    },
    methods: {
      goodsHandleRowClick(row, column, event) {
        this.$refs.goodsMultipleTable.toggleRowSelection(row);
        let data=this.$refs.goodsMultipleTable.selection
        this.multipleSelection = data
      },
      selectChargeTypeToPrice(v){
        let data=this.chargeList
        if(data && data.length>0){
          for(let i=0;i<data.length;i++){
            if(v==data[i].id){
              //更新价格
               this.addNodeFormData.price=data[i].itemPrice;
               this.addNodeFormData.depositCaseServiceid=data[i].id;
               break;
            }
          }
        }
      },
      //tree中类型添加
      addType(){
        this.saveTypeData={
          "id": 0,
          "parentId": 0,
          "typeCode": "",
          "typeName": "",
          "name": "",
          "sort": "",
          "remark": "",
          "version": 0
        }
        this.dialogVisibleType=true
      },//寄存类型变化，触发楼与室是否显示
      typeChange(v){
        //设置类型
        this.setType(v);
       if(v==1){
         this.floorVisible=false;
         this.roomVisible=false;

       }else if(v==2){
         this.floorVisible=true;
         this.roomVisible=false;
       }else{
         this.floorVisible=true;
         this.roomVisible=true;
       }

      },//设置根据typecode设置type
      setType(v){
        let data=this.copydictionary.storage_node_type;
        if( data && data.length){
           for(let i=0;i<data.length;i++){
             if(v==data[i].dataCode){
               this.saveTypeData.type= data[i].dataText;
               break;
             }
           }
        }
      },//通过id获得点对象
      getNodeById(id) {
        let data=this.treeInfoLoad;
        if(data && data.length>0){
          for(let i=0;i<data.length;i++){
              if(data[i].id==id){
                 return data[i];
                 break;
              }
          }
        }
        return null;
      }
      ,//tree中类型修改
      modifyType(){
        this.loadTypeNode();
      },
      //tree中节点删除
      removeType(){
        let data = this.selectedData;
        if (data.id==0 ||data.label =="服务物品分类") {
          this.$message("未选中寄存节点")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData={
              "id": data.id,
              "version":this.getVersionById(data.id)
            }
          API['deleteDepositCaseTreeWithId'](postData).then(response=>{
            const { message }=response;
            this.$message(message)
            this.loadTreeData()
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },getVersionById(id){
        let data=this.treeInfoLoad;
        if(data && data.length>0){
          for(let i=0;i<data.length;i++){
            if(id==data[i].id){
                return data[i].version;
                break;
            }
          }
        }
        return 0;
      },loadTypeNode(){
        // let data1=this.$ref.tree.getCheckedNodes();
        let data=this.selectedData;
        let this_load=this;
        let postData={
          "id": data.id
        }
        API['loadDepositCaseTreeWithId'](postData).then(response=>{
               let  { data }=response;
          let v=data.typeCode;
          console.log('hhh',data)
          this_load.saveTypeData=data;
          this_load.loadFloor();
          //显示表单数据
          this_load.dialogVisibleType=true
          if(v==1){
            this_load.floorVisible=false;
            this_load.roomVisible=false;

          }else if(v==2){
            this_load.floorVisible=true;
            this_load.roomVisible=false;
            this_load.saveTypeData.floorType=data.parentId;
          }else{
            this_load.floorVisible=true;
            this_load.roomVisible=true;
            let node=this_load.getNodeById(data.parentId);
            //加载室
            this_load.loadRoom(node.parentId);
            this_load.saveTypeData.floorType=node==null?0:node.parentId;
            this_load.saveTypeData.roomType=data.parentId;
          }
          this_load.saveTypeData.typeCode=data.typeCode;
        }).catch(error => {
          this.$message(error)
        })

      },loadChargeByTypeCode(){
        let postData={
          "serviceType":"storage_charge",
          "keyword":""
        }
        API['loadServiceItemListWithServiceType'](postData).then(response=>{
          let { data }=response;
          this.chargeList = data.list;
        }).catch(error => {
          this.$message(error)
        })
      },
      //加载字典查询
      loadDictionaryData(){
        //没有数据，加载数据
        this.$store.dispatch("user/getdictionary")
          .then((res) => {
            //获取字典数据
            this.dictionary = res;
            this.copydictionary = JSON.parse(JSON.stringify(this.dictionary));
            console.log('字典',res)
            this.$set(this.dictionary, res);
          })
          .catch(() => console.log("promise catch err"));
      },
      //table中类型添加
      add(){
        // let dataArr = this.$refs.tree.getCheckedNodes();
        let data=this.selectedData;
        if (data && data.id){
          this.addNodeFormData={  //保存寄存新增表单数据
            "depositCaseTreeid": data.id,//寄存架id
              "columnNumber":"",//列增加数
              "columnBeginNumber":"",//列起始数
              "columnDelNumber":"",//列排除数
              "rowNumber":"",//层数
              "rowBeginNumber":"",//层起始数
              "rowDelNumber":"",//层排除数
              "rowOrderType":0,//排序类型
              "chargeType":"",//收费类型
              "orderId":0,//排序
              "price":0,//价格
              "remark":0,//备注
              "creatNoType":0,//编码生成规则
          }
          this.dialogVisible=true
        } else{
          this.$message("请选择项目")
          return
        }

      },//保存架生成表单
      saveAddNode(){
        //表单验证
        let save_node=this;
        this.$refs["addNodeForm"].validate((valid) => {
          if (valid) {
            //提交数据
            let postData=save_node.addNodeFormData;
              postData.id=0;
            //更新格位信息
            API['saveDepositCase'](postData).then(response=>{
              if(response){
                let data=response;
                if (!data) {
                  save_node.$message('数据保存失败');
                  return
                }
                if(data.code==1){
                  save_node.$message('保存成功！');
                  save_node.clearForm();
                }
              }else{
                save_node.$message('数据保存失败');
              }
            }).catch(error => {
              // this.$message(error)
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //保存寄存格位信息
      saveNode(){
        //表单验证
        let save_node=this;
        this.$refs["editNodeForm"].validate((valid) => {
          if (valid) {
            //提交数据
            let postData=save_node.editNodeFormData;
            if(postData.depositCaseCode==1){
              postData.depositCaseType='单格位';
            }else{
              postData.depositCaseType='双格位';
            }
            //更新格位信息
            API['updateDepositCase'](postData).then(response=>{
              if(response){
                let data=response;
                if (!data) {
                  save_node.$message('数据保存失败');
                  return
                }
                if(data.code==1){
                  save_node.$message('保存成功！');
                  save_node.clearForm();
                }
              }else{
                save_node.$message('数据保存失败');
              }
            }).catch(error => {
              // this.$message(error)
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //table中类型修改
      modify(){

        let data = this.$refs.singleTable.selection
        if (data.length==0) {
          this.$message("未选中格位")
          return
        }
        else{
          this.loadStorageNodeById(data[0].id)
        }
      },
      //删除寄存格位
      remove(){
        let data = this.$refs.singleTable.selection
        if (data.length==0) {
          this.$message("未选中格位")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = {
              "id": data[0].id,
              "version":data[0].version
            }
          API['deleteDepositCaseNodeWithId'](postData).then(response => {
            const {message} = response;
            this.$message(message)
            let data = this.$refs.tree.getCheckedNodes()
            //更新数据
            this.loadStorageDataByNodeId(data[0].id)
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //加载不是包的信息
      addPackage(){
        API['loadGoodsServiceListNoPackage']().then(response=>{
          let {data} = response
          if (data.length>0){
            this.listNoPackage = data
            this.dialogVisibleList = true
          }

        }).catch(error => {
          this.$message(error)
        })
      },
      //删除选中的不是包的物品服务
      deletePackageItems(index){
        if (this.saveData.servicePackageItems && this.saveData.servicePackageItems.length && this.saveData.servicePackageItems[index]){
          this.saveData.servicePackageItems.splice(index,1)
          this.$forceUpdate()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /*追加服务物品包保存按钮*/
      showSelectName(){
        if (this.multipleSelection.length==0){
          this.$message("未选中项目")
          return
        }
        let id=[]
        //判断原来添加的列表中是否存在要添加的
        if (this.saveData.servicePackageItems && this.saveData.servicePackageItems.length>0) {
          this.saveData.servicePackageItems.forEach(n=>{
            this.multipleSelection.forEach((item,index)=>{
              //如果存在相同的id
              if (n.serviceItemId == item.id) {
                //源列表中数量加1
                //设置数量保存两位小数
                n.itemNumber=Number(n.itemNumber).toFixed(2);
                // n.itemNumber=n.itemNumber.match(/^\d*(\.?\d{0,2})/g)[0]||null;
                n.itemNumber = Number(n.itemNumber)+Number(item.itemNumber)
                //记录重复的id
                id.push(item.id)
              }
            })
          })
        }
        /*删除重复的数据*/
        if (id.length){
          id.forEach((i)=>{
            if (this.multipleSelection.length){
              this.multipleSelection.forEach((m,n)=>{
                if (m.id==i)
                  this.multipleSelection.splice(n,1)
              })
            }
          })
        }
        if (this.multipleSelection.length) {
          this.multipleSelection.forEach(item=> {
            this.saveData.servicePackageItems.push({
              serviceItemId: item.id,
              itemName: item.itemName,
              itemPrice: Number(item.itemPrice.match(/^\d+(?:.\d{0,2})?/)),
              itemNumber: Number(item.itemNumber.match(/^\d+(?:.\d{0,2})?/)),
              version: item.version
            })
          })
        }
        this.dialogVisibleList = false
        this.search = ""
        this.multipleSelection=[]
      },
      //寄存楼，室，架 类型保存
      saveType(){
        //表单验证
        let this_type=this;
        if(this.saveTypeData.typeCode==1){
          this.saveTypeData.parentId=0;
        }else if(this.saveTypeData.typeCode==2){
          this.saveTypeData.parentId=this.saveTypeData.floorType;
        }else{
          this.saveTypeData.parentId=this.saveTypeData.roomType;
        }
        this_type.$refs["treeNodeForm"].validate((valid) => {
          if (valid) {
            this_type.saveFlagType = true
            let postData=this_type.saveTypeData
            API['saveDepositCaseTree'](postData).then(response=>{
              let { message }=response;
              this_type.$message(message)
              this_type.dialogVisibleType = false
              this_type.loadTreeData()
              this_type.loadFloor()
              this_type.saveFlagType = false
            }).catch(error => {
              this_type.$message(error)
              this_type.saveFlagType = false
            })
            this_type.saveFlagType = false
          }
        });
      }
       ,//判断是否是节点
      checkIsNode(node,data){
        let flag=false;
         if(data && data.length && data.length>0){
            for(let i=0;i<data.length;i++){
             if(node.id==data[i].parentId){
               flag=true;
               return  flag;
             }
            }
         }
         return flag;
      },//递归获得树的子集
      getChildren(node,data){
        let this_get=this;
        let child=new Array();
        if(this_get.checkIsNode(node,data)){
          if (data && data.length){
            data.forEach(item=>{
              if (node.id==item.parentId && item.name) {
                let nodeItem={
                  id:item.id,
                  label:item.name
                };
                if(this_get.checkIsNode(nodeItem,data)){
                  if(! nodeItem.children){
                    nodeItem.children=new Array();
                  }
                  nodeItem.children.push(this_get.getChildren(nodeItem,data));
                }
                child.push(nodeItem);
              }
            });
            node.children=child;
            return node;
          }
        }else{
          return node;
        }
      }
       ,
      //加载物品，服务类型基本信息
      loadTreeData(){
        let postData={
        }
        let this_load=this;
        //加载寄存树信息
        API['loadDepositCaseTreeList'](postData).then(response=>{
          let  { data }=response;
          if (!data) {
            this_load.$message('数据读取失败')
            return
          }
          let node={
            id:0,
            label: '寄存管理',
            children: []
          };
          this_load.treeInfoLoad=data;
          node=this_load.getChildren(node,this.treeInfoLoad);
          let treeArray=new Array();
              treeArray.push(node);
          this.treeData = treeArray;
          this_load.loadFloor(this_load.treeInfoLoad);
        }).catch(error => {
          this.$message(error)
        })
      },
      loadDictionaryData(){
        //没有数据，加载数据
        this.$store.dispatch("user/getdictionary")
          .then((res) => {
            //获取字典数据
            this.dictionary = res;
            this.copydictionary = JSON.parse(JSON.stringify(this.dictionary));
            this.$set(this.dictionary, res);
          })
          .catch(() => console.log("promise catch err"));
      },
      /*分页*/
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pagesize = size;
        alert(pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.pager.currentPage = currentPage;
        var data = this.$refs.tree.getCheckedNodes()
        if (data && data.length) {
          this.loadStorageDataByNodeId(data[0].id) //点击第几页
        }
      },
      GoodsSearch(){
        let data = this.$refs.tree.getCheckedNodes()
        if (data && data.length) {
          this.loadStorageDataByNodeId(data[0].id) //点击第几页
        }
      },
      //加载寄存架下格位信息
      loadStorageDataByNodeId(id){
        let postData={
          "casetreeId": id
        }
        API['loadDepositCaseWithIdCaseTreeId'](postData).then(response=>{
          const { data }=response;
          this.tableData = data;
          // this.tableData = data.list;
          // this.pager = data.pager
        }).catch(error => {
          this.$message(error)
        })
      },loadStorageNodeById(id){
        let postData={
          "id": id
        }
        API['loadDepositCaseWithId'](postData).then(response=>{
          const { data }=response;
          //加载寄存格位信息到表单
          this.editNodeFormData = data;
          this.dialogEditVisible=true
        }).catch(error => {
          this.$message(error)
        })

      },//加载寄存楼数据
      loadFloor(){
        let postData={
          "parentId": 0,
          "type":1
        }
        API['loadDepositCaseTreeTypeParentId'](postData).then(response=>{
          let { data }=response;
          this.floor = data;
        }).catch(error => {
          this.$message(error)
        })
      },
      //加载寄存室数据
      loadRoom(v){
        let postData={
          "parentId": v,
          "type":2
        }
        let load_this=this;
        API['loadDepositCaseTreeTypeParentId'](postData).then(response=>{
          let { data }=response;
          load_this.room = data;
          console.log(load_this.room);
        }).catch(error => {
          load_this.$message(error)
        })
      },
      //tree单选
      handleClick(data,checked, node){
        console.log(data);
        //点树节点不触发加载事件
        this.$refs.tree.setCheckedNodes([data])
        console.log(this.$refs.tree.setCheckedNodes([data]),888)
        this.selectedData=data;
       if(node.node.isLeaf){
          if(checked && data.label!="寄存管理" && data.id!=0){
            // console.log(this.$refs.tree.getCheckedNodes())
            this.loadStorageDataByNodeId(data.id)
          }
        }else{
          this.$message("只有寄存架才能加地格位");
        }
      },
      //点击行触发，选中或不选中复选框
      handleRowClick(row, column, event) {
        if (this.tableSelection.length>0){
          this.$refs.singleTable.toggleRowSelection(this.tableSelection[0],false);
        }
        this.$refs.singleTable.toggleRowSelection(row);
        this.tableSelection = [row]
      },
      select(selection, row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          // console.log('把数组的第一个元素从其中删除后', selection);
          this.$refs.singleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.tableSelection = selection
      },

      selectAll(selection) {
        if (selection.length >1) {
          selection.length = 1;
        }
        this.tableSelection = selection
      },
      //服务物品保存
      save(){
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        this.$refs.chargingdialog.validate(valid=>{
          if (valid){
            this.saveFlag = true
            let postData={
              goodsService:this.saveNodeFormData.goodsService,
              goodsServicePackage:this.saveData.servicePackageItems
            }
            console.log(postData)
            API['saveGoodsService'](postData).then(response=>{
              const { message }=response;
              this.$message(message)
              let data = this.$refs.tree.getCheckedNodes()
              this.loadStorageDataByNodeId(data[0].id)
              this.dialogVisible = false
              this.saveFlag = false
            }).catch(error => {
              this.$message(error)
              this.saveFlag = false
            })
          }
        })

      },//限制两位小数
      proving() {
        // this.saveData.goodsService.itemPrice 是input的值　　
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveData.goodsService.itemPrice
        this.saveData.goodsService.itemPrice=this.checkNum(obj,2);
      }, // 检测数量
       checkCount() {
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveData.goodsService.itemNumber
         this.saveData.goodsService.itemNumber=this.checkNum(obj,2);
      },checkNum(obj,n){
        // 先把非数字的都替换掉，除了数字和.
        obj = obj.replace(/[^\d.]/g, '');
        // 必须保证第一个为数字而不是.
        obj = obj.replace(/^\./g, '');
        // 保证只有出现一个.而没有多个.
        obj = obj.replace(/\.{2,}/g, '');
        // 保证.只出现一次，而不能出现两次以上
        obj =obj.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        let index = -1
        for (let i in obj) {
          if (obj[i] === '.') {
            index = i
          }
          if (index !== -1) {
            //保留两位小数
            if (i - index > n) {
              obj = obj.substring(0, obj.length - 1)
            }
          }
        }
        //返回验证后的结果
         return obj;
      },
      //验证整数
        onlyNumber(){
           // 先把非数字的都替换掉，除了数字和.
          let obj=this.saveData.goodsService.sort;
               obj=Number.parseInt(obj);
          this.saveData.goodsService.sort=obj;
      }
    },
    watch:{
   /*   "dialogVisible"() {
        if (this.dialogVisible == false) {
          this.$nextTick(() => {
            this.$refs.chargingdialog.resetFields();
          })
        }
      },
      "dialogVisibleType"() {
        if (this.dialogVisibleType == false) {
          this.$nextTick(() => {
            this.$refs.treeNodeForm.resetFields();
          })
        }
      },
      "dialogVisibleList"() {
        if (this.dialogVisibleList == false) {
        }
      }*/
    }
  }
</script>
<style>
  .search{
    height: 500px;
    overflow-y: scroll;
  }
  .maintenanceOfChargingItems .searchData  .el-input{
    margin:0 10px 0 50px;
  }
  .maintenanceOfChargingItems .searchData  .el-input__inner{
    vertical-align: middle!important;
  }
</style>
<style scoped>

  .list{
    display: flex;flex-wrap: wrap;
    margin:5px 0px;
    justify-content: space-between;
    padding-left: 120px;
    text-align: left;
    max-height: 120px;
    overflow-y: scroll;
  }
  .list .item {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    /*width: 150px;*/
    height:30px;
    background-color: #efefef;
    padding:0 5px;
    border-radius:5px;
    overflow: hidden;
    margin-bottom: 10px;
    text-align: center;
  }
  .list .title{
    margin-right: 10px;
    float: left;
  }
  .list .delete{
    line-height: 30px;
    margin-left: 10px;
    color:red;
    float: right;
    cursor: pointer;
  }
  .wrapper{
    display: flex;
    flex-wrap: wrap;
    margin:5px 0px;
    justify-content: space-between;
    height:500px;
    overflow-y: auto;
  }
  .box-card {
    flex:0 0 150px;
    display: inline-block;
    box-shadow:  0 2px 12px 0 rgba(0,0,0,.1);;
    margin-bottom: 30px;
    margin-right: 10px;
  }
  .box-card .item {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    width: 100%;
    height: 90px;
    text-align: center;
    padding: 0 1em;
    border-radius:5px;
    overflow: hidden;
  }
  .item:hover{
    cursor: pointer;
  }
  .item:last-child{
    margin-bottom: 0px;
  }
  .item.select{
    background-color: lightgreen;
  }
  .item h2{
    height: 30px;
    overflow: hidden;
  }

</style>
